<!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<style>
@import "./index.css";

.count {
  text-align: right;
  width: 5em;
}

.percentage {
  text-align: right;
  width: 5em;
}

.key {
  padding-left: 1em;
}

.drilldown-group-title {
  font-weight: bold;
  padding: 0.5em 0 0.2em 0;
}
.entry-details {
}

.entry-details TD {
}

.details {
  width: 0.1em;
}

.details span {
  padding: 0 0.4em 0 0.4em;
  background-color: var(--on-surface-color);
  color: var(--surface-color);
  border-radius: 25px;
  text-align: center;
  cursor: -webkit-zoom-in;
}

#legend {
  padding-right: 20px;
}

dl {
  float: right;
  border-style: solid;
  border-width: 1px;
  padding: 20px;
}

</style>
<div class="panel">
  <h2>IC Panel</h2>
  <h3>IC Explorer</h3>
  <div id="legend">
    <dl>
      <dt>0</dt>
      <dd>uninitialized</dd>
      <dt>X</dt>
      <dd>no feedback</dd>
      <dt>1</dt>
      <dd>monomorphic</dd>
      <dt>^</dt>
      <dd>recompute handler</dd>
      <dt>P</dt>
      <dd>polymorphic</dd>
      <dt>N</dt>
      <dd>megamorphic</dd>
      <dt>G</dt>
      <dd>generic</dd>
    </dl>
  </div>

  <h3>Data</h3>

  <p>Trace Count: <span id="count">0</span></p>

    <h3>Result</h3>
    <p>
    Group-Key:
    <select id="group-key"></select>
    </p>
    <p>
    Filter by Time
    <br></br>
    <input type="search" id="filter-time-start" placeholder="start"></input> :
      <input type="search" id="filter-time-end" placeholder="end"></input>
    <button id="filterICTimeBtn">Filter</button>
    <p>
      <table id="table" width="100%">
        <tbody id="table-body">
        </tbody>
      </table>
    </p>
</div>
